<template>
  <div class="scrollview">
    <slot></slot>
    <div class="loading" >{{this.is_end?"已完成":"加载中"}}</div>;
  </div>
</template>

<script>
  export default {
    name: 'scrollView',
    props:['is_end','ready_to_load','loadCallback','page'],
    computed: {

    },
    methods:{
      _onLoadPage(){
        let clientHeight = document.documentElement.clientHeight;
        let scrollHeight = document.body.scrollHeight;
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        let proLoadDis = 30;

        if ((scrollTop + clientHeight) >= (scrollHeight - proLoadDis)) {
          if(this.page==1){
            this.loadCallback && this.loadCallback();
            return;
          }
          if (!this.is_end) {

            if (!this.ready_to_load) {
              return;
            }
            this.loadCallback && this.loadCallback();
          }

        }
      }
    },
    mounted(){

      window.addEventListener('scroll', this._onLoadPage);
    },
    destroyed(){

      window.removeEventListener('scroll', this._onLoadPage);
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'
  .scrollview {
    padding-bottom: 1.2rem;
  }
  .loading {
    padding-top: px2rem(10px);
    padding-bottom: px2rem(10px);
    font-size: px2rem(16px);
    text-align: center;
    color: #ccc;
  }
</style>
